<template>
  <div class="mail-secondary">
    <Modal
      v-model:visible="visible1"
      :title="$t('mail.emailVerify')"
      button-align="center"
      width="600"
      height="250"
      cancel-button
      :ok-button="onSubmit"
      @close="closeDialog"
    >
      <div class="warp">
        <Form
          :model="mailState"
          style="width: 500px"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 19 }"
          autocomplete="off"
          label-align="right"
          :colon="false"
        >
          <FormItem name="address" :label="$t('mail.address')" v-bind="validateInfos.address">
            <Input v-model:value="mailState.address" />
          </FormItem>
          <FormItem name="content" :label="$t('mail.content')">
            <Input v-model:value="mailState.content" disabled="disabled" />
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
  import { defineComponent, reactive, ref } from 'vue';
  import { Input, Form, Modal } from '@jecloud/ui';
  import { sendeMail } from '@/api';
  import { useI18n } from '@common/locales';

  const useForm = Form.useForm;

  export default defineComponent({
    name: 'MailSecondary',
    components: {
      Form,
      Input,
      FormItem: Form.Item,
      // eslint-disable-next-line
      Modal,
    },
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['update:visible'],
    setup(props, { emit }) {
      const I18n = useI18n().messages.zh_CN;
      // 自己关闭对话框，修改父组件数据状态
      const closeDialog = () => {
        emit('update:visible', false);
      };
      const visible1 = ref(props.visible);
      // 校验规则;
      const rulesRef = reactive({
        address: [
          { required: true, message: '该输入项为必填项' },
          {
            pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
            message: '请输入正确邮箱地址',
          },
        ],
      });
      // 邮箱字段;
      const mailState = reactive({
        address: '',
        content: I18n.mail.word,
      });
      const { resetFields, validate, validateInfos } = useForm(mailState, rulesRef, {
        // onValidate: (...args) => console.log(...args),
      });
      const onSubmit = () => {
        validate()
          .then(() => {
            sendeMail({
              address: mailState.address,
              content: mailState.content,
            }).then(Modal.notice('发送成功', 'success'));
          })
          .catch(() => {
            // console.log('error', err);
          });
      };

      return {
        mailState,
        validateInfos,
        resetFields,
        onSubmit,
        closeDialog,
        visible1,
      };
    },
  });
</script>

<style lang="less" scoped>
  .mail-secondary {
    :deep(.fa-window-maximize) {
      display: none;
    }
  }
</style>
